<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="keywords" content="">
    <meta name="description" content="">
    <title>个人中心</title>
    <link rel="stylesheet" href="../../../component/pear/css/pear.css">
    <link rel="stylesheet" href="../../../admin/css/dimples.css">
    <link rel="icon" href="../../../admin/images/favicon.ico" type="image/x-icon"/>
    <link rel="stylesheet" href="../../../admin/css/other/center.css"/>
    <style>
        .layui-form-item {
            margin-top: 17px !important;
            margin-bottom: 17px !important;
        }
    </style>
</head>
<body class="pear-container">
<div class="layui-row layui-col-space10">
    <div class="layui-col-md3">
        <div class="layui-card">
            <div class="layui-card-body" style="padding: 25px;">
                <div class="text-center layui-text">
                    <div class="user-info-head" id="userInfoHead">
                        <img id="avatar" src="" width="115px" height="115px" alt="" style="cursor: pointer">
                    </div>
                    <h2 style="padding-top: 20px;font-size: 20px;" class="realName"></h2>
                    <p style="padding-top: 8px;margin-top: 10px;font-size: 13.5px;">China ， 中国</p>
                </div>
            </div>
            <div style="height: 45px;border-top: 1px whitesmoke solid;text-align: center;line-height: 45px;font-size: 13.5px;">
                <span>上次登陆时间: </span><span class="lastLoginTime">2021-08-07 00:00:00</span>
            </div>
        </div>
        <div class="layui-card">
            <div class="layui-card-header">
                登录记录
            </div>
            <div class="layui-card-body">
                <ul class="list" id="loginRecord">
                    <!--<li th:each="log:${logs}" class="list-item">
                        <span class="title" th:text="${log.title}"></span>
                        <span class="footer" th:text="${log.createTime}"></span>
                    </li>-->
                </ul>
            </div>
        </div>
    </div>
    <div class="layui-col-md9">
        <div class="layui-card">
            <div class="layui-card-header">个人信息</div>
            <div class="layui-card-body">
                <div class="layui-tab layui-tab-brief">
                    <div class="layui-tab-content">
                        <div class="layui-tab-item layui-show">
                            <form class="layui-form">
                                <div class="layui-form-item layui-hide">
                                    <label class="layui-form-label">编号</label>
                                    <div class="layui-input-block">
                                        <input id="userId" type="text" name="userId"
                                               lay-verify="title"
                                               autocomplete="off" placeholder="请输入编号" class="layui-input">
                                    </div>
                                </div>
                                <div class="layui-form-item">
                                    <label class="layui-form-label required">账号</label>
                                    <div class="layui-input-block">
                                        <input id="username" type="text" readonly name="username"
                                               lay-verify="required"
                                               autocomplete="off" placeholder="请输入账号" class="layui-input">
                                    </div>
                                </div>
                                <div class="layui-form-item">
                                    <label class="layui-form-label">姓名</label>
                                    <div class="layui-input-block">
                                        <input id="realName" type="text" name="realName"
                                               lay-verify="title"
                                               autocomplete="off" placeholder="请输入姓名" class="layui-input">
                                    </div>
                                </div>
                                <div class="layui-form-item">
                                    <label class="layui-form-label">邮箱</label>
                                    <div class="layui-input-block">
                                        <input id="email" type="text" name="email" lay-verify="email"
                                               autocomplete="off" placeholder="请输入邮箱" class="layui-input">
                                    </div>
                                </div>
                                <div class="layui-form-item">
                                    <label class="layui-form-label">电话</label>
                                    <div class="layui-input-block">
                                        <input id="mobile" type="text" name="mobile" lay-verify="phone"
                                               autocomplete="off" placeholder="请输入电话" class="layui-input">
                                    </div>
                                </div>
                                <div class="layui-form-item">
                                    <label class="layui-form-label">部门</label>
                                    <div class="layui-input-block" id="deptId">
                                    </div>
                                </div>
                                <div class="layui-form-item layui-form-text">
                                    <label class="layui-form-label">描述</label>
                                    <div class="layui-input-block">
                                        <textarea id="description" placeholder="请输入描述" name="description"
                                                  class="layui-textarea"></textarea>
                                    </div>
                                </div>
                                <div class="layui-form-item">
                                    <div class="layui-input-block">
                                        <button class="pear-btn pear-btn-primary pear-btn-sm" lay-submit
                                                lay-filter="user-update">修改资料
                                        </button>
                                        <button class="pear-btn pear-btn-sm edit-password">更改密码</button>
                                    </div>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="layui-card">
            <div class="layui-card-header">
                我的文章
            </div>
            <div class="layui-card-body">
                <div class="layui-tab layui-tab-brief" lay-filter="docDemoTabBrief">
                    <div class="layui-tab-content">
                        <div class="layui-tab-item layui-show">
                            <div class="layui-row layui-col-space10" style="margin: 15px;">
                                <div class="layui-col-md1">
                                    <img src="../../../admin/images/act.jpg"
                                         style="width: 100%;height: 100%;border-radius: 5px;"/>
                                </div>
                                <div class="layui-col-md11" style="height: 80px;">
                                    <div class="title">为什么程序员们愿意在GitHub上开源自己的成果给别人免费使用和学习？</div>
                                    <div class="content">
                                        “Git的精髓在于让所有人的贡献无缝合并。而GitHub的天才之处，在于理解了Git的精髓。”来一句我们程序员们接地气的话：分享是一种快乐~
                                    </div>
                                    <div class="comment">2020-06-12 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 评论 5 点赞 12 转发
                                        4
                                    </div>
                                </div>
                            </div>
                            <div class="layui-row layui-col-space10" style="margin: 15px;">
                                <div class="layui-col-md1">
                                    <img src="../../../admin/images/act.jpg"
                                         style="width: 100%;height: 100%;border-radius: 5px;"/>
                                </div>
                                <div class="layui-col-md11" style="height: 80px;">
                                    <div class="title">为什么程序员们愿意在GitHub上开源自己的成果给别人免费使用和学习？</div>
                                    <div class="content">
                                        “Git的精髓在于让所有人的贡献无缝合并。而GitHub的天才之处，在于理解了Git的精髓。”来一句我们程序员们接地气的话：分享是一种快乐~
                                    </div>
                                    <div class="comment">2020-06-12 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 评论 5 点赞 12 转发
                                        4
                                    </div>
                                </div>
                            </div>
                            <div class="layui-row layui-col-space10" style="margin: 15px;">
                                <div class="layui-col-md1">
                                    <img src="../../../admin/images/act.jpg"
                                         style="width: 100%;height: 100%;border-radius: 5px;"/>
                                </div>
                                <div class="layui-col-md11" style="height: 80px;">
                                    <div class="title">为什么程序员们愿意在GitHub上开源自己的成果给别人免费使用和学习？</div>
                                    <div class="content">
                                        “Git的精髓在于让所有人的贡献无缝合并。而GitHub的天才之处，在于理解了Git的精髓。”来一句我们程序员们接地气的话：分享是一种快乐~
                                    </div>
                                    <div class="comment">2020-06-12 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 评论 5 点赞 12 转发
                                        4
                                    </div>
                                </div>
                            </div>
                            <div class="layui-row layui-col-space10" style="margin: 15px;">
                                <div class="layui-col-md1">
                                    <img src="../../../admin/images/act.jpg"
                                         style="width: 100%;height: 100%;border-radius: 5px;"/>
                                </div>
                                <div class="layui-col-md11" style="height: 80px;">
                                    <div class="title">为什么程序员们愿意在GitHub上开源自己的成果给别人免费使用和学习？</div>
                                    <div class="content">
                                        “Git的精髓在于让所有人的贡献无缝合并。而GitHub的天才之处，在于理解了Git的精髓。”来一句我们程序员们接地气的话：分享是一种快乐~
                                    </div>
                                    <div class="comment">2020-06-12 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 评论 5 点赞 12 转发
                                        4
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<script src="../../../component/layui/layui.js"></script>
<script src="../../../component/pear/pear.js"></script>
<script src="../../../component/pear/dimples.js"></script>
<script>
    layui.use(['element', 'jquery', 'layer', 'form', 'open', 'ajax','xmSelect'], function () {
        let $ = layui.jquery;
        let layer = layui.layer;
        let form = layui.form;
        let open = layui.open;
        let ajax = layui.ajax;
        let xmSelect = layui.xmSelect;

        let user = getAllData().user;
        let deptSelect;

        document.getElementById("avatar").src = BASE_URL + "/system/user/avatar/" + user.avatar;

        // 渲染部门
        ajax.send('/system/dept/tree', {}, function (result) {
            deptSelect.update({
                data: result.data
            });
        });
        // 渲染数据
        ajax.send('/system/user/' + user.userId, {}, function (result) {
            let data = result.data[0];
            $('.realName').val(data.realName);
            $('.lastLoginTime').text(data.lastLoginTime);
            $('#userId').val(data.userId);
            $('#username').val(data.username);
            $('#realName').val(data.realName);
            $('#email').val(data.email);
            $('#mobile').val(data.mobile);
            $('#description').html(data.description);
            deptSelect.setValue([data.deptId]);
        });
        // 用户登陆记录
        ajax.send('/system/user/login/log', {}, function (result) {
            let data = result.data;
            let str = "";
            $.each(data, function (i, items) {
                str += "<li class='list-item'><span class='title'>" + items.operateAddr + "</span>";
                str += "<span class='footer'>" + items.createTime + "</span></li>";
            });
            $("#loginRecord").append(str);
        });

        // 修改密码
        $(".edit-password").click(function () {
            open.iframe('修改密码', 'password.html')
            return false;
        })

        // 修改图片
        $("#avatar").click(function () {
            layer.open({
                type: 2,
                title: '更换图片',
                shade: 0.1,
                area: ["900px", "500px"],
                content: 'profile.html?userId=' + user.userId,
                btn: ['确定', '取消'],
                yes: function (index, layero) {
                    window['layui-layer-iframe' + index].submitForm();
                }
            });
        });

        form.on('submit(user-update)', function (data) {
            data.field.deptId = deptSelect.getValue('value')[0];
            ajax.send('/system/user', {
                data: JSON.stringify(data.field),
                dataType: 'json',
                contentType: 'application/json',
                type: 'put',
            }, function (result) {
                if (result.code == 200) {
                    layer.msg("修改成功", {icon: 1, time: 1000});
                } else {
                    layer.msg("修改失败", {icon: 2, time: 1000});
                }
            })
            return false;
        });

        deptSelect = xmSelect.render({
            el: '#deptId',
            empty: '呀, 没有数据呢',
            model: {label: {type: 'text'}},
            clickClose: true,
            prop: {
                name: 'deptName',
                value: 'deptId'
            },
            theme: {
                color: '#52c41a',
            },
            tree: {
                //是否显示树状结构
                show: true,
                //是否严格遵守父子模式
                strict: false,
                //是否开启极简模式
                simple: false,
                //点击节点是否展开
                clickExpand: true,
                //点击节点是否选中
                clickCheck: true,
            },
            on: function (data) {
                if (data.isAdd) {
                    return data.change.slice(0, 1)
                }
            }
        });
    })
</script>
</body>
</html>
